<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>example02</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>example02</h1>
    <hr>
    <div id="app">
        
    </div>
    <p><button onclick="destroy()">destroy</button></p>
    <p><button onclick="reload()">刷新</button></p>
    <p><button onclick="tick()">更改数据</button></p>

    <script type="text/javascript">
       var jspang = Vue.extend({
        template:`<p>{{message}}</p>`,
        data:function(){
            return{
                message: 'Hello, I am JSpang'
            }
        },
        mounted: function(){
            console.log("mounted 被创建");
        },
        destroyed:function(){
            console.log('destroy 销毁之后');
        },
        updated:function(){
            console.log('updated 更新之后');
        }
       })

       var vm = new jspang().$mount("#app");
       function destroy(){
        vm.$destroy();
       }

       function reload(){
        vm.$forceUpdate();
       }

       function tick(){
         vm.message="update message info";
         vm.$nextTick(function(){
            console.log('message更新完后我被调用了');
         })
       }
    </script>
</body>
</html>